<template>
  <div>
    <p>演示axios的使用</p>
    <button @click="play">播放</button>
    <div class="list" v-for="(item, index) in list" :key="index">
        <router-link class="link" :to="'/play/'+item.id">
            <img :src="item.al.picUrl" width="86">
        </router-link>
        <div class="song-info">
            <h3 class="title">{{item.name}}</h3>
            <div class="singer">{{item.ar[0].name}}</div>
            <div class="time">{{new Date(item.publishTime).getFullYear()}}-{{new Date(item.publishTime).getMonth()+1}}</div>
        </div>
        
    </div>
  </div>
</template>

<script>
// 引入axios
const axios = require("axios");
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
      this.getData()
  },
  methods: {
    play() {
        this.$refs.audio.play();
    },
    getData() {
      // 向给定ID的用户发起请求
      axios
        .get("http://localhost:3000/artist/top/song?id=6452")
        .then(res => {
          // 处理成功情况
          //  console.log(res.data);
          this.list = res.data.songs;
        //   console.log(1,res.data.songs[3].name);
        //   console.log(2,res.data.songs[3].ar[0].name);
        //   console.log(3,res.data.songs[3].al.picUrl);
        })
        .catch(function (error) {
          // 处理错误情况
          console.log(error);
        });
    },
  },
};
</script>

<style>
    .link {
        display: block;
        width: 86px;
        height: 86px;
        float: left;
    }
    .list {
        margin-left: 20px;
        cursor: pointer;
        position: relative;
        border-bottom: 1px solid #f2f2f2;
        padding: 10px 0;
    }
    .list::after {
        display: block;
        content: '';
        clear: both;
    }
    .song-info {
        float: left;
        margin-left: 10px;
    }
    .singer {
        color: #999;
        line-height: 1.8;
    }
    .title {
        margin-top: 16px;
    }
    .title:hover,
    .singer:hover {
        color: #31c27c;
    }
    .time {
        position: absolute;
        right: 20px;
        top: 32px;
    }
</style>